<template>
  <div>
    <div class="containera">
      <el-form ref="form" :model="form" label-width="200px" :rules="rules">
        <el-form-item
          label="公司地址:"
          prop="webAddress"
        >
          <el-input
            type="input"
            v-model="form.webAddress"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.webAddress }}</span>
        </el-form-item>
        <el-form-item label="网站名称:" prop="webName">
          <el-input type="input" v-model="form.webName" v-if="seen"></el-input>
          <span v-else>{{ form.webName }}</span>
        </el-form-item>
        <el-form-item label="ICP:" prop="icp">
          <el-input type="input" v-model="form.icp" v-if="seen"></el-input>
          <span v-else>{{ form.icp }}</span>
        </el-form-item>
        <el-form-item label="公安备案号:" prop="policeRecord">
          <el-input
            type="input"
            v-model="form.policeRecord"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.policeRecord }}</span>
        </el-form-item>
        <el-form-item label="版权所有:" prop="copyright">
          <el-input
            type="input"
            v-model="form.copyright"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.copyright }}</span>
        </el-form-item>
        <el-form-item label="电话:" prop="telephone">
          <el-input
            type="input"
            v-model="form.telephone"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.telephone }}</span>
        </el-form-item>
        <el-form-item label="地址:" prop="address">
          <el-input
            type="input"
            v-model="form.address"
            v-if="seen"
          ></el-input>
          <span v-else>{{ form.address }}</span>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input type="email" v-model="form.email" v-if="seen"></el-input>
          <span v-else>{{ form.email }}</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="edit" v-if="!seen"> 编辑</el-button>
          <el-button type="primary" @click="save('form')" v-else
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {
        id: 0,
        //网站地址
        webAddress: " ",
        //网站名称
        webName: " ",
        //ICP
        icp: " ",
        //公安备案号
        policeRecord: " ",
        copyright:"",

        telephone: " ",
        email: " ",
        address:"",
      },
      seen: false,
      rules: {
        webAddress:[
            { required: true, message: '请输入网站地址', trigger: 'blur' },
          ],
        webName: [
          { required: true, message: "请输入网站名称", trigger: "blur" },
        ],
        icp: [{ required: true, message: "请输入ICP", trigger: "blur" }],
        policeRecord: [
          { required: true, message: "请输入公安备案号", trigger: "blur" },
        ],
        telephone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  mounted() {
   
  },
  methods: {
    edit() {
      this.seen = !this.seen;
     
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          
           

            this.seen = false;
          }
         else {
          console.log("error submit!!");
          this.$message.error("请将表单填写完整");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.containera {
  width: 600px;
  margin: auto;
  /* display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  margin-top: 2rem;
}
</style>